<template>
  <div class="catemanager">
    <hmheader title="频道管理">
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
    </hmheader>
    <div class="mychannel">
      <h3>点击删除频道</h3>
      <div class="list">
        <span
          v-for="(item, index) in cateList"
          :key="item.id"
          @click="remove(item, index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div class="youchannel">
      <h3>点击添加频道</h3>
      <div class="list">
        <span
          v-for="(item, index) in tempList"
          :key="item.id"
          @click="add(item, index)"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>


<script>
import hmheader from "@/components/hmheader.vue";
// 获取栏目
import { getCateList } from "@/apis/category.js";
export default {
  // 储存数据
  data() {
    return {
      cateList: [], //点击删除的频道
      tempList: [], //点击添加的频道
    };
  },

  components: {
    hmheader,
  },
  methods: {
    // 移除标签栏
    remove(item, index) {
      // 先添加
      this.tempList.push(item);
      localStorage.setItem(
        "toutiao_59_tempList",
        JSON.stringify(this.tempList)
      );

      // 后移除
      this.cateList.splice(index, 1);
      localStorage.setItem(
        "toutiao_59_cateList",
        JSON.stringify(this.cateList)
      );

      console.log(index);
    },
    // 添加标签
    add(item, index) {
      // 先添加
      this.cateList.unshift(item);
      localStorage.setItem(
        "toutiao_59_cateList",
        JSON.stringify(this.cateList)
      );
      // 后删除
      this.tempList.splice(index, 1);
      localStorage.setItem(
        "toutiao_59_tempList",
        JSON.stringify(this.tempList)
      );
    },
  },
  // 获取栏目所有标签数据
  async activated() {
    // 判断，如果是否存在本地数据
    let toutiao_59_cateList = localStorage.getItem(
      "toutiao_59_cateList",
      JSON.stringify(this.cateList)
    );
    // console.log(toutiao_59_cateList);
    // 如果本地储存没数据，发请求获取
    if (!toutiao_59_cateList) {
      let res = await getCateList();
      // console.log(res.data.data);
      this.cateList = res.data.data;

      // 判断，如果有登录，去掉头条和关注&&如果没有登录，去掉头条
      let toutiao_59_token = localStorage.getItem("toutiao_59_token");
      if (toutiao_59_token) {
        this.cateList.splice(0, 2); //移除前面两个
      } else {
        this.cateList.splice(0, 1); //移除1个
      }
      // 储存为本地
      localStorage.setItem(
        "toutiao_59_cateList",
        JSON.stringify(this.cateList)
      );
    } else {
      //  如果本地储存有数据，优先加载本地的数据
      this.tempList = JSON.parse(localStorage.getItem("toutiao_59_tempList"));
      this.cateList = JSON.parse(localStorage.getItem("toutiao_59_cateList"));
    }
  },
};
</script>


<style lang="less" scoped>
.mychannel,
.youchannel {
  padding: 10px;
  h3 {
    line-height: 30px;
    font-weight: bold;
  }
  .list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    > span {
      width: 20%;
      margin-left: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>